<template>
  <div>
    <sg-nav></sg-nav>
    <waves></waves>
    <div class="container">
      <el-card class="card" :body-style="{ borderRadius: '10px'}"> <!-- 添加 border-radius -->
        <div class="card-title" style="color: #3effb1">{{tagName}}</div> <!-- 添加标题 -->
        <div class="bbb">
          <div class="tag-wrapper" v-for="(tag, index) in ArticleList" :key="index">
            <a @click="toOtherPage(tag.id)" class="tag-item" :style="{ fontSize: tag.fontSize, color: getRandomColor() }">
              {{ tag.title }} <sup>1</sup>
            </a>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import header from '@/components/header.vue'
import { getArticleListTag } from '../../api/category/category'

export default {
  name: 'hello',
  components: {
    'sg-nav': header,
  },
  data () {
    return {
      msg: 'Welcome to kalacloud.com',
      ArticleList: [],
      tagId:'',
      tagName:''
    }
  },
  mounted(){
    this.getTagList();
  },
  created() {
    this.tagId=this.$route.query.id==undefined?0:parseInt(this.$route.query.id)
    this.tagName = this.$route.query.name === undefined ? '' : this.$route.query.name + '标签';
  },
  computed: {
    // 计算每个标签的字体大小
    fontSizeStyle() {
      return this.tagList.map(tag => {
        return {
          fontSize: `${1 + tag.count * 0.4}rem`
        };
      });
    }
  },
  methods: {
    toOtherPage(id){
      this.$router.push({
        path:'/DetailArticle',
        query:{
          aid:id,
        }
      });
    },
    getTagList(){
      getArticleListTag(this.tagId).then(res=>{
        this.ArticleList=res
      })
    },
    //获取随机颜色
    getRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    }
  }
}
</script>

<style >
.card-content {
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.bbb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tag-item {
  font-size: 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
}
</style>
